<template>
	<el-drawer v-model="isDrawerVisible" title="用户详情" :with-header="true">
	    <el-descriptions
	        direction="vertical"
	        :column="1"
			size="50%"
	        border
	      >
			<el-descriptions-item label="用户编号">{{user.user_id}}</el-descriptions-item>
			<el-descriptions-item label="用户昵称">{{user.user_name}}</el-descriptions-item>
			<el-descriptions-item label="用户手机号">{{user.user_sjh}}</el-descriptions-item>
			<el-descriptions-item label="用户邮箱">{{user.user_email}}</el-descriptions-item>
			<el-descriptions-item label="性别">{{user.user_sex==2?'女':user.user_sex==1?'男':'未知'}}</el-descriptions-item>
			<el-descriptions-item label="创建时间">{{user.createDate}}</el-descriptions-item>
			<el-descriptions-item label="最后登录时间">{{user.loginDate}}</el-descriptions-item>
			<el-descriptions-item label="用户头像">
				<el-image
				      style="width: 200px; height: 200px; border-radius: 10px;"
					  :src="'/api/src/images/'+user.user_tx"
				      :preview-src-list="['/api/upload/'+user.user_tx]"
				      fit="cover"
				/>
			</el-descriptions-item>
		</el-descriptions>
	</el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const isDrawerVisible = ref(false);

const user = ref();

const handleDetailData = (obj) => {
	isDrawerVisible.value = true;
	user.value = obj;
}

// 将handleDetailData暴露给父组件
defineExpose({
	handleDetailData
})
</script>

<style scoped>
</style>